<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" style="border: 1px solid red"></canvas>

    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

      // 1. 绘制 20 x 20 黑色矩形
      ctx.fillRect(0, 0, 20, 20);

      // 2. 绘制直线
      // 移动到左下角
      ctx.moveTo(0, 150);
      // 终点在右上角
      ctx.lineTo(300, 0);
      // 绘制
      ctx.stroke();

      // 3. 绘制居中，半径为 10 的圆环 arc(x, y, r, startangle（起点弧度）, endangle（终点弧度）, counterclockwise（false：顺时针，true：逆时针）)
      // x 轴 0 ~ 90 度顺时针
      ctx.beginPath();
      ctx.arc(150, 75, 10, 0, 0.5 * Math.PI, false);
      ctx.lineWidth = 3;
      ctx.strokeStyle = "red";
      ctx.stroke();

      // x 轴 90 ~ 180 度顺时针
      ctx.beginPath();
      ctx.arc(150, 75, 10, 0.5 * Math.PI, 1 * Math.PI, false);
      ctx.lineWidth = 3;
      ctx.strokeStyle = "green";
      ctx.stroke();

      // x 轴 0 ~ 270 度逆时针
      ctx.beginPath();
      ctx.arc(150, 75, 10, 0, 1.5 * Math.PI, true);
      ctx.lineWidth = 3;
      ctx.strokeStyle = "blue";
      ctx.stroke();

      // x 轴 270 ~ 180 度逆时针
      ctx.beginPath();
      ctx.arc(150, 75, 10, 1.5 * Math.PI, 1 * Math.PI, true);
      ctx.lineWidth = 3;
      ctx.strokeStyle = "orange";
      ctx.stroke();
    </script>
  </body>
</html>
